<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

<!-- 两种模式的对比
hash模式只可以更改#后面的内容，History模式可以通过API设置任意的同源URL
History模式可以通过API添加任意类型的数据到历史记录中，hash模式只能更改哈希值，也就是字符串
Hash模式无需后端配置，并且兼容性好，History模式在用户手动输入地址或者刷新页面的时候会发起url请求，后端需要配置index,html页面用于匹配不到静态资源的时候 -->

    <!-- 路由原理 hash/history
本质是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无需刷新页面，目前只有两种实现方式
Hash 模式
History 模式 -->
    window.addEventListener('hashchange', () => {
    <!-- // ... 具体逻辑 -->
    })
    <!-- www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过hashchange事件监听到url的变化，从而进行页面跳转，并且无论哈希值如何变化，服务端接收道德url请求永远是www.test.com。 -->
    <!-- // 新增历史记录 -->
    history.pushState(stateObject, title, URL)
    <!-- // 替换当前历史记录 -->
    history.replaceState(stateObject, title, URL)
    <!-- History 模式
  History 模式是 HTML5 新推出的功能，主要使用history.pushState和history.replaceState改变 URL
  
  通过 History 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录   -->
</body>

</html>